<template>
  <div id="user">
    <!--搜索-->
    <div class="search-content">
	    <el-input v-model="userName" placeholder="请输入用户名查询" prefix-icon="el-icon-search" clearable @change="loadData" />
	    <el-input v-model="name" placeholder="请输入昵称查询" prefix-icon="el-icon-search" clearable @change="loadData" />
	    <el-select v-model="sex" clearable placeholder="请选择性别"  @change="loadData" >
		    <el-option
		      v-for="item in sexList"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
		  </el-select>
      <el-select v-model="grade" clearable placeholder="请选择会员等级"  @change="loadData" >
        <el-option
          v-for="item in gradeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!-- <el-select v-model="internal" clearable placeholder="请选择是否为内部会员"  @change="loadData" >
        <el-option
          v-for="item in internalList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
      <!-- <el-select v-model="isOnLine" clearable placeholder="请选择是否在线"  @change="loadData" >
        <el-option
          v-for="item in isOnLineList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
     <el-date-picker
        v-model="dateTimeRange[0]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期">
      </el-date-picker>
       <el-date-picker
        v-model="dateTimeRange[1]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期">
      </el-date-picker>
	    <el-button type="primary" icon="el-icon-search" @click="loadData">查询</el-button>
       <el-button type="primary" @click="dialogVisible = true">绑定用户</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="用户名" prop="userName" align="center"/>
        <el-table-column label="昵称" prop="name" align="center"/>
        <el-table-column label="年龄" prop="age" align="center"/>
        <el-table-column label="性别" prop="sex" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.sex==='woman'?'女':'男'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="用户头像" prop="httpAvatar" align="center">
          <template slot-scope="scope">
            <img v-if='scope.row.httpAvatar' width="50" height='50' :src="scope.row.httpAvatar" alt="头像有误" />
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="会员等级" prop="grade" align="center" width="100">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.grade==='ordinary'"  type="info">普通用户</el-tag>
            <el-tag size="small" v-if="scope.row.grade==='blueDiamond'">蓝钻VIP</el-tag>
            <el-tag size="small" v-if="scope.row.grade==='anCrown'" type="warning">皇冠VIP</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="内部会员" prop="internal" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.internal?'是':'否'}}</div>
          </template>
        </el-table-column> -->
        <el-table-column label="金币数量" prop="gold" align="center"/>
        <el-table-column label="是否在线" prop="isOnLine" align="center">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.isOnLine"  type="success">在线</el-tag>
            <el-tag size="small" v-else  type="info">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createDate" width="170"  align="center" />
        <el-table-column label="上次登录时间" prop="loginDate" width="170"  align="center" />
        <el-table-column label="操作"  width="100" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="showDialog(scope.row)">解绑用户</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 输入层 -->
    <el-dialog
      title="绑定用户"
      :visible.sync="dialogVisible"
      width="98%">
      <el-form label-position="right" label-width="38%"  ref="agentRuleForm">
        <el-form-item label="绑定用户登录名：">
          <el-input v-model="loginUser.userName" placeholder="请输入绑定用户登录名" clearable/>
        </el-form-item>
        <el-form-item label="绑定用户密码：">
          <el-input v-model="loginUser.password" placeholder="请输入绑定用户密码" type='password' clearable/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="解绑用户"
      :visible.sync="dialogVisible2"
      width="98%">
      <el-form label-position="right" label-width="38%"  ref="agentRuleForm">
        <el-form-item label="解绑用户密码：">
          <el-input v-model="loginUser.password" placeholder="请输入绑定用户密码" type='password' clearable/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="delUser()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
  export default {
    name: "usersetting",
    data(){
      return{
        // 查询
        userName:"",
        name:"",
        sex:"",
        dialogVisible: false,
        dialogVisible2: false,
        sexList: [
	        {
	        	value:0,
	        	label:'男'
	        },
	        {
	        	value:1,
	        	label:'女'
	        }
        ],
        grade:null,
        gradeList:[
          {
            value:0,
            label:'普通用户'
          },
          {
            value:1,
            label:'蓝钻VIP'
          },
          {
            value:2,
            label:'皇冠VIP'
          }
        ],
        internal:null,
        internalList:[
          {
            value:0,
            label:'否'
          },
          {
            value:1,
            label:'是'
          }
        ],
        isOnLine:null,
        isOnLineList:[
          {
            value:'0',
            label:'离线'
          },
          {
            value:'1',
            label:'在线'
          }
        ],
        dateTimeRange:[],
        isClearable:true,
        // 列表数据
        tableData:[],
        //分页
        currentPage: 1,
        pageSize:10,
        total: 0,
        loginUser:{
          id: 0,
          userName: '',
          password: ''
        }
      }
    },
    mounted() {
      this.loadData();
    },
    methods:{
    	isNotNull(value){
          return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      loadData(){
        let that=this;
        that.tableData=[];
        let data={
          pageNumber:that.currentPage,
          pageSize:that.pageSize,
          filters:[]
        };
	       if(that.isNotNull(that.userName)){ //用户名
	         data.filters.push({
	           property:"user_name",
	           value:that.userName,
	           operator: "like"
	         })
	       }
	       if(that.isNotNull(that.name)){ //昵称
	         data.filters.push({
	           property:"name",
	           value:that.name,
	           operator: "like"
	         })
	       }
	       if(that.isNotNull(that.sex)){ //性别
	         data.filters.push({
	           property:"sex",
	           value:that.sex,
	           operator: "eq"
	         })
	       }
        if(this.isNotNull(that.grade)){ //会员等级
          data.filters.push({
            property:"grade",
            value:that.grade,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.internal)){ //是否为内部会员
          data.filters.push({
            property:"internal",
            value:that.internal,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.isOnLine)){ //是否在线
          data.filters.push({
            property:"is_onLine",
            value:that.isOnLine,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.dateTimeRange)){ //创建时间
          data.filters.push({
            property:"create_date",
            value:that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property:"create_date",
            value:that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: '/agent/member/bind/list',
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data:data
        }).then(function (res) {
          if(res.code===200){
            that.total=res.data.total;
            let arr=res.data.records;
            if(arr.length===0){
              that.tableData=[];
            }else{
              that.tableData=arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //绑定用户
      addUser(){
        let that = this;
        if(!that.loginUser.userName){
          Message.error('绑定用户登录名不能为空');
          return
        }
        if(!that.loginUser.password){
          Message.error('绑定用户密码不能为空');
          return
        }
        request({
          method: 'post',
          url: '/agent/member/bind',
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          params: {
            userName: that.loginUser.userName,
            password: that.loginUser.password
          }
        }).then(function (res) {
          if(res.code===200){
            Message.success("绑定成功"); 
            that.dialogVisible = false;
            
            that.loadData();
            that.loginUser = {
              id: 0,
              userName: '',
              password: ''
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      showDialog(row){
        let that = this;
        that.loginUser.id = row.id;
        that.dialogVisible2 = true;
      },
      //解绑用户
      delUser(){
        let that = this;
        if(!that.loginUser.password){
          Message.error('解绑用户密码不能为空');
          return
        }
        request({
          method: 'post',
          url: '/agent/member/untying/'+that.loginUser.id,
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          params:{
            password: that.loginUser.password
          }
        }).then(function (res) {
          if(res.code===200){
            Message.success("解绑成功");
            that.dialogVisible2 = false;
            that.loadData();
            that.loginUser = {
              id: 0,
              userName: '',
              password: ''
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
        
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize=val;
        this.loadData();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.loadData();
      }
    }
  }
</script>

<style scoped src="../../assets/css/userManagement/userSetting.css">

</style>
